import React from 'react';
import type { AttendanceRecord, Employee } from '../types';

interface AttendanceTrackerProps {
  attendance: AttendanceRecord[];
  employees: Employee[];
}

const AttendanceTracker: React.FC<AttendanceTrackerProps> = ({ attendance, employees }) => {
  const getEmployeeName = (id: number) => {
    return employees.find(e => e.id === id)?.name || '未知';
  };
  
  const getStatusChip = (status: 'Present' | 'Absent' | 'Late') => {
    const baseClasses = "px-3 py-1 text-xs font-medium rounded-full";
    switch (status) {
        case 'Present':
            return `${baseClasses} bg-green-100 text-green-800`;
        case 'Absent':
            return `${baseClasses} bg-red-100 text-red-800`;
        case 'Late':
            return `${baseClasses} bg-yellow-100 text-yellow-800`;
        default:
            return `${baseClasses} bg-slate-100 text-slate-800`;
    }
  }

  const getStatusDisplay = (status: 'Present' | 'Absent' | 'Late') => {
    switch (status) {
        case 'Present': return '出勤';
        case 'Absent': return '缺勤';
        case 'Late': return '迟到';
        default: return status;
    }
  }

  return (
    <div className="space-y-6">
      <h2 className="text-3xl font-bold text-slate-800">考勤记录</h2>
      
      <div className="bg-white p-6 rounded-xl shadow-md">
        <div className="overflow-x-auto">
          <table className="w-full text-sm text-left text-slate-500">
            <thead className="text-xs text-slate-700 uppercase bg-slate-50">
              <tr>
                <th scope="col" className="px-6 py-3">员工</th>
                <th scope="col" className="px-6 py-3">日期</th>
                <th scope="col" className="px-6 py-3">状态</th>
                <th scope="col" className="px-6 py-3">签到时间</th>
                <th scope="col" className="px-6 py-3">签退时间</th>
              </tr>
            </thead>
            <tbody>
              {attendance.map(record => (
                <tr key={record.id} className="bg-white border-b hover:bg-slate-50">
                  <td className="px-6 py-4 font-medium text-slate-900">{getEmployeeName(record.employeeId)}</td>
                  <td className="px-6 py-4">{record.date}</td>
                  <td className="px-6 py-4">
                    <span className={getStatusChip(record.status)}>{getStatusDisplay(record.status)}</span>
                  </td>
                  <td className="px-6 py-4">{record.clockIn || 'N/A'}</td>
                  <td className="px-6 py-4">{record.clockOut || 'N/A'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default AttendanceTracker;
